<template>
    <el-dialog
            :title="title"
            :visible.sync="dialogFormVisible"
            @close="close"
    >
        <el-form ref="form" :model="form" label-width="90px">
            <el-form-item label="账户：">
                <el-input
                        v-model.trim="form.account"
                        :autosize="{ minRows: 2, maxRows: 30}"
                        placeholder="管理员账户"
                />
            </el-form-item>
            <el-form-item label="手机号：">
                <el-input v-model="form.phone" :autosize="{ minRows: 2, maxRows: 20}" type="phone" placeholder="手机号"/>
            </el-form-item>
            <el-form-item label="密码："><el-input v-model="form.password" placeholder="登录密码"/></el-form-item>

            <el-form-item label="授权角色：" prop="role_id" >
                <el-select ref="treeRole" v-model="form.role_ids"
                           clearable placeholder="请选择" @clear="handleRoleClear" >
                <el-option hidden key="role_ids" :value="form.role_ids" :label="role_name"></el-option>
                    <el-tree :data="rolesList"
                             :props="defaultRoleProps"
                             :expand-on-click-node="false"
                             node-key="seller_role_id"
                             :check-on-click-node="true"
                             @node-click="handleNodeClick">
                    </el-tree>
                </el-select>
            </el-form-item>
            <el-form-item label="是否启用：" prop="is_check">
                <el-radio-group v-model="form.status">
                    <el-radio :label="0" :checked="form.status == 0 ? 'checked' : ''">禁用</el-radio>
                    <el-radio :label="1" :checked="form.status == 1 ? 'checked' : ''">启用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否启用：" prop="is_check">
                <el-radio-group v-model="form.is_admin">
                    <el-radio :label="0" :checked="form.is_admin == 0 ? 'checked' : ''">禁用</el-radio>
                    <el-radio :label="1" :checked="form.is_admin == 1 ? 'checked' : ''">启用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="danger" @click="close">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: "merchant_detail",
        data(){
            return {
                title: '',
                form: {
                    seller_id: 0,
                    account: '',
                    status: 1,
                    admin_head: '',
                    password: '',
                    role_ids: [],
                    role_id: '',
                    is_check: 0,
                    is_admin: 0,
                },
                role_name: "",
                rolesList:[],
                defaultRoleProps: {
                    children: "_child",
                    label: "role_name",
                },
                RoleCheckedId:[],
                rules: {
                    account: [
                        {required: true, trigger: 'blur', message: '请输入管理员账户'},
                        {
                            min: 2,
                            max: 20,
                            message: '长度在 2 到 20 个字符',
                            trigger: 'blur'
                        }
                    ],
                },
                dialogFormVisible: false,
            }
        },
        methods: {
            // 节点点击事件
            handleNodeClick(data) {
                // 这里主要配置树形组件点击节点后，设置选择器的值；自己配置的数据，仅供参考
                this.role_name = data.role_name
                this.form.role_ids = data.seller_role_id
                // 选择器执行完成后，使其失去焦点隐藏下拉框的效果
                // this.$refs.treeRole.setCheckedKeys(data.seller_role_id)
                this.$refs.treeRole.blur()
            },handleRoleClear() {
                // 将选择器的值置空
                this.role_name = ''
                this.form.role_ids = ''
            },

            userShowEdit(seller,row,i){
                console.log('seller')
                console.log(seller)
                this.rolesList = seller.treeRole;
                console.log(this.rolesList)
                this.form.seller_id = seller.seller_id;
                this.form.role_id = seller.seller_role_id;
                const detail = Object.assign({}, row);
                if (!detail) {
                    this.title = '添加用户';
                } else {
                    this.title = '编辑用户';
                    this.form = Object.assign(this.form, detail);

                }
                console.log(this.form )
                this.dialogFormVisible = true

            },
            close() {
                this.$refs['form'].resetFields();
                this.form = this.$options.data().form;
                this.dialogFormVisible = false;
            },
            save() {
                this.$refs['form'].validate(async (valid) => {
                    if (valid) {
                        const {msg, status} = this.form.seller_admin_id ?
                            await this.$put(this.$api.adminSellerUser+this.$api.update,this.form) :
                            await this.$post(this.$api.adminSellerUser+this.$api.create,this.form);
                        this.$message({
                            message: msg,
                            type: status == 1 ? 'success' : 'error',
                        });
                        this.$emit('fetchData');
                        this.close();
                    } else {
                        return false;
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>